<script setup lang="ts">
import { computed, ref } from 'vue'
import { Role } from '@/types/enum'
import { register } from '@/services/auth'
import type { RegisterData } from '@/types/auth'

const formData = ref<RegisterData>({
  roleId: Role.Druggist, phone: '', password: '',inviterCode: '', name: '', sex: 1, age: '',
})
const phone_code = ref('')

/**
 * 触发表单提交
 */
async function submit() {
  console.log(formData.value)
  await register(formData.value)
  await uni.showToast({
    title: '注册成功', icon: 'success',
  })
  setTimeout(() => {
    uni.navigateTo({
      url: '/pages/auth/login',
    })
  }, 1500)
}

function genderChange(event: any) {
  formData.value.sex = event.detail.value
}

const isDruggist = computed(() => {
  return formData.value.roleId === Role.Druggist
})
const isDoctor = computed(() => {
  return formData.value.roleId === Role.Doctor
})
const isPatient = computed(() => {
  return formData.value.roleId === Role.Patient
})
</script>

<template>
  <view class="abslrtb flex-column a-center wrap">
    <!-- <qui-navbar title="注册"></qui-navbar>
    <view class="topbox flex-column aj-center">
      <image class="logoimg" src="/static/logo.png"></image>
    </view> -->

    <view class="flex tabs mb30">
      <view @click="formData.roleId=Role.Druggist" class="flex-1 flex aj-center"
            :class="isDruggist&&'active'">
        <text class="fs30 fw600 text-gray" :class="isDruggist&&'curtext'">药商</text>
      </view>
      <view @click="formData.roleId=Role.Doctor" class="flex-1 flex aj-center" :class="isDoctor&&'active'">
        <text class="fs30 fw600 text-gray" :class="isDoctor&&'curtext'">医生</text>
      </view>
      <view @click="formData.roleId=Role.Patient" class="flex-1 flex aj-center" :class="isPatient&&'active'">
        <text class="fs30 fw600 text-gray" :class="isPatient&&'curtext'">患者</text>
      </view>
    </view>

    <!-- 药商注册 -->
    <view class="form" v-if="isDruggist">
      <view class="flex a-center form-item">
        <view class="label">
          <text>手机号</text>
        </view>
        <image class="label_icon" src="/static/images/icon_phone.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input placeholder-class="placeholder" class="qui-input" type="text" v-model="formData.phone"
                 placeholder="请输入手机号" />
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label">
          <text>验证码</text>
        </view>
        <image class="label_icon" src="/static/images/icon_code.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input placeholder-class="placeholder" class="qui-input" type="text" v-model="phone_code"
                 placeholder="请输入验证码" />
        </view>
        <view>
          <text style="opacity: 0.8;" class="fs28 ptb20 main-color yzm">获取验证码</text>
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label">
          <text>密码</text>
        </view>
        <image class="label_icon" src="/static/images/icon_pw.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input :password="true" placeholder-class="placeholder" class="qui-input" type="text"
                 v-model="formData.password" placeholder="请输入6-14位密码" />
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label">
          <text>平台邀请码</text>
        </view>
        <image class="label_icon" src="/static/images/icon_pw.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input placeholder-class="placeholder" class="qui-input" type="text" v-model="formData.inviterCode"
                 placeholder="请输入平台邀请码" />
        </view>
      </view>
      <!-- <view class="ptb30 flex">
    		<label class="radio">
    			<radio @click="changeCheck" :checked="checked" color="#F73131" class="qradio" value="" /><text class="fs24 text-gray">我已阅读并遵守</text> <text class="fs24 main-color underline">《用户协议》</text> <text class="fs24 text-gray">与</text> <text class="fs24 main-color underline">《隐私协议》</text>
    		</label>
    	</view> -->
    </view>

    <!-- 医生注册 -->
    <view class="form" v-if="isDoctor">
      <view class="flex a-center form-item">
        <view class="label">
          <text>手机号</text>
        </view>
        <image class="label_icon" src="/static/images/icon_phone.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input placeholder-class="placeholder" class="qui-input" type="text" v-model="formData.phone"
                 placeholder="请输入手机号" />
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label">
          <text>验证码</text>
        </view>
        <image class="label_icon" src="/static/images/icon_code.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input placeholder-class="placeholder" class="qui-input" type="text" v-model="phone_code"
                 placeholder="请输入验证码" />
        </view>
        <view>
          <text style="opacity: 0.8;" class="fs28 ptb20 main-color yzm">获取验证码</text>
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label">
          <text>密码</text>
        </view>
        <image class="label_icon" src="/static/images/icon_pw.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input :password="true" placeholder-class="placeholder" class="qui-input" type="text"
                 v-model="formData.password" placeholder="请输入6-14位密码" />
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label">
          <text>药商邀请码</text>
        </view>
        <image class="label_icon" src="/static/images/icon_pw.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input placeholder-class="placeholder" class="qui-input" type="text" v-model="formData.inviterCode"
                 placeholder="请输入药商邀请码" />
        </view>
      </view>
    </view>

    <view class="form" v-if="isPatient">
      <view class="flex a-center form-item">
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input v-model="formData.name"
                 placeholder="请输入姓名"
                 placeholder-class="placeholder" class="qui-input" type="text"
          />
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label">
          <text>性别</text>
        </view>
        <image class="label_icon" src="/static/images/icon_phone.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <radio-group @change="genderChange">
            <label class="radio">
              <radio value="1" checked color="$mainColor" />
              男
            </label>
            <label style="margin-left: 100rpx;" class="radio">
              <radio value="2" color="$mainColor" />
              女
            </label>
          </radio-group>
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input v-model="formData.age"
                 placeholder="请输入年龄"
                 placeholder-class="placeholder" class="qui-input" type="text"
          />
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label">
          <text>手机号</text>
        </view>
        <image class="label_icon" src="/static/images/icon_phone.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input placeholder-class="placeholder" class="qui-input" type="text" v-model="formData.phone"
                 placeholder="请输入手机号" />
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label">
          <text>验证码</text>
        </view>
        <image class="label_icon" src="/static/images/icon_code.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input placeholder-class="placeholder" class="qui-input" type="text" v-model="phone_code"
                 placeholder="请输入验证码" />
        </view>
        <view>
          <text style="opacity: 0.8;" class="fs28 ptb20 main-color yzm">获取验证码</text>
        </view>
      </view>
      <view class="flex a-center form-item">
        <view class="label">
          <text>密码</text>
        </view>
        <image class="label_icon" src="/static/images/icon_pw.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input :password="true" placeholder-class="placeholder" class="qui-input" type="text"
                 v-model="formData.password" placeholder="请输入6-14位密码" />
        </view>
      </view>

      <view class="flex a-center form-item">
        <view class="label">
          <text>医生邀请码</text>
        </view>
        <image class="label_icon" src="/static/images/icon_pw.png"></image>
        <view class="label_fgs"></view>
        <view class="flex-1">
          <input placeholder-class="placeholder" class="qui-input" type="text" v-model="formData.inviterCode"
                 placeholder="请输入医生邀请码" />
        </view>
      </view>
    </view>

    <view class="btns">
      <view class="qbtn" @click="submit()">
        <text class="btn-text-color fs30">立即注册</text>
      </view>
    </view>

    <view class="bottom">
    </view>
  </view>
</template>

<style lang="scss">
// @import "../styles/skin01.scss";
.qradio {
  transform: scale(0.6);
  color: #FF5A5F;
}
</style>
